import * as echarts from "echarts";
import chinaJson from "@/utils/mock/json/china.json";
import worldJson from "@/utils/mock/json/world.json";
import { world } from "@/utils/mock/world";

const comEChart = () => {
  // 画图
  const initChart = (info) => {
    const chartDom = document.getElementById(info.id);
    let myChart = null
    if (!echarts.getInstanceByDom(chartDom)) {
      myChart = echarts.init(chartDom);
    } else {
      myChart = echarts.getInstanceByDom(chartDom)
    }
    const option = info.option;
    myChart.setOption(option);

    // 图表重置
    function onResize() {
      myChart.resize();
    }

    window.removeEventListener("resize", onResize);
    window.addEventListener("resize", onResize);
  };

  // 折线图
  const lineChart = (info) => {
    const option = {
      grid: {
        top: 10,
        left: 10,
        right: 10,
        bottom: 10,
        containLabel: true,
      },
      xAxis: {
        type: "category",
        // boundaryGap: false,
        data: info.dataInfo.xAxisData,
        // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: info.dataInfo.seriesData,
          // data: [150, 230, 224, 218, 135, 147, 260],
          type: "line",
          areaStyle: {
            opacity: 0.5,
          },
        },
      ],
    };
    info.option = option;
    initChart(info);
  };

  // 多个折线图
  const lineMoreChart = (info) => {
    const option = {
      // title: {
      //     text: "Stacked Line",
      // },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        show: false,
        // data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
      },
      // grid: {
      //     left: "3%",
      //     right: "4%",
      //     bottom: "3%",
      //     containLabel: true,
      // },
      // toolbox: {
      //     feature: {
      //         saveAsImage: {},
      //     },
      // },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: info.dataInfo.xAxisData || [],
        // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: info.dataInfo.seriesData || [],
      // series: [
      //     {
      //         name: "Email",
      //         type: "line",
      //         stack: "Total",
      //         data: [120, 132, 101, 134, 90, 230, 210],
      //     },
      //     {
      //         name: "Union Ads",
      //         type: "line",
      //         stack: "Total",
      //         data: [220, 182, 191, 234, 290, 330, 310],
      //     },
      //     {
      //         name: "Video Ads",
      //         type: "line",
      //         stack: "Total",
      //         data: [150, 232, 201, 154, 190, 330, 410],
      //     },
      //     {
      //         name: "Direct",
      //         type: "line",
      //         stack: "Total",
      //         data: [320, 332, 301, 334, 390, 330, 320],
      //     },
      //     {
      //         name: "Search Engine",
      //         type: "line",
      //         stack: "Total",
      //         data: [820, 932, 901, 934, 1290, 1330, 1320],
      //         areaStyle: {
      //             origin: "start",
      //             // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
      //             color: {
      //                 type: "linear",
      //                 x: 0,
      //                 y: 0,
      //                 x2: 0,
      //                 y2: 1,
      //                 colorStops: [
      //                     {
      //                         offset: 0,
      //                         color: "red", // 0% 处的颜色
      //                     },
      //                     {
      //                         offset: 1,
      //                         color: "#fff", // 100% 处的颜色
      //                     },
      //                 ],
      //                 global: false, // 缺省为 false
      //             },
      //         },
      //     },
      // ],
    };
    info.option = option;
    initChart(info);
  };

  // 实心饼状图
  const barChart = (info) => {
    const option = {
      // title: {
      //     text: "Referer of a Website",
      //     subtext: "Fake Data",
      //     left: "center",
      // },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "left",
        top: "30%",
      },
      series: [
        {
          // name: "Access From",
          type: "pie",
          radius: "50%",
          // center: ["25%", "50%"],
          data: info.dataInfo.seriesData || [],
          // data: [
          //     { value: 1048, name: "Search Engine" },
          //     { value: 735, name: "Direct" },
          //     { value: 580, name: "Email" },
          //     { value: 484, name: "Union Ads" },
          //     { value: 300, name: "Video Ads" },
          // ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    info.option = option;
    initChart(info);
  };

  // 空心饼状图
  const barEmptyChart = (info) => {
    const option = {
      // tooltip: {
      //   trigger: "item",
      // },
      legend: info.legend || {
        orient: "vertical",
        left: "5%",
        top: "30%",
        // width: 250,
        // right: "5%",
      },
      series: [
        {
          // name: "Access From",
          type: "pie",
          radius: info.series?.radius || ["40%", "70%"],
          center: info.series?.center || ["55%", "50%"],
          avoidLabelOverlap: false,
          itemStyle: info.series?.itemStyle || {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
          },
          label: info.series?.label || {
            show: false,
            position: "center",
          },
          emphasis: info.series?.emphasis || {
            label: {
              show: true,
              formatter: "{b}\n{c}",
              fontSize: "16",
              // fontWeight: "bold",
            },
          },
          labelLine: info.series?.labelLine || {
            show: false,
          },
          data: info.dataInfo || [],
          // data: [
          //     { value: 1048, name: "Search Engine" },
          //     { value: 735, name: "Direct" },
          //     { value: 580, name: "Email" },
          //     { value: 484, name: "Union Ads" },
          //     { value: 300, name: "Video Ads" },
          // ],
        },
      ],
    };
    info.option = option;
    initChart(info);
  };

  // 柱状拼接+折线图
  const barLineChart = (info) => {
    const option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {},
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          axisLabel: {
            //x轴文字的配置
            show: true,
            interval: 0, //使x轴文字显示全
          },
          data: info.dataInfo.xAxisData || [],
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "专利数量",
          type: "bar",
          stack: "Ad",
          emphasis: {
            focus: "series",
          },
          barWidth: 30,
          data: info.dataInfo.patentData || [],
        },
        {
          name: "论文数量",
          type: "bar",
          stack: "Ad",
          emphasis: {
            focus: "series",
          },
          barWidth: 30,
          data: info.dataInfo.paperData || [],
        },
        {
          name: "综合评价",
          type: "line",
          // stack: "Ad",
          // emphasis: {
          //   focus: "series",
          // },
          data: info.dataInfo.pjData || [],
        },
      ],
    };
    info.option = option;
    initChart(info);
  };

  // 竖向单个柱状图
  const datesetChart = (info) => {
    const option = {
      grid: {
        top: 10,
        left: 10,
        right: 10,
        bottom: 10,
        containLabel: true,
      },
      xAxis: {
        type: "category",
        data: info.dataInfo.xAxisData || [],
        // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: info.dataInfo.seriesData || [],
          // data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
          barWidth: 14,
          itemStyle: {
            normal: {
              // borderRadius: [4, 4, 0, 0],
              color: info.color || "#5470c6",
            },
          },
        },
      ],
    };
    info.option = option;
    initChart(info);
  };

  // 横向单个柱状图
  const datesetHChart = (info) => {
    const option = {
      tooltip: {
        show: true,
      },
      xAxis: {
        type: "value",
      },
      yAxis: {
        type: "category",
        data: info.dataInfo.yAxisData || [],
        // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      series: [
        {
          data: info.dataInfo.seriesData || [],
          // data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
          barWidth: 14,
          itemStyle: {
            normal: {
              borderRadius: [0, 4, 4, 0],
              color: info.color || "#5470c6",
            },
          },
        },
      ],
    };
    info.option = option;
    initChart(info);
  };

  // 竖向多个柱状图
  const datesetMoreChart = (info) => {
    const option = {
      legend: info?.legend || {},
      tooltip: info?.tooltip || {},
      grid: info?.grid || {
        top: 10,
        left: 10,
        right: 10,
        bottom: 10,
        containLabel: true,
      },
      dataset: info?.dataset || {
        source: [
          ["product", "2015", "2016", "2017"],
          ["Matcha Latte", 43.3, 85.8, 93.7],
          ["Milk Tea", 83.1, 73.4, 55.1],
          ["Cheese Cocoa", 86.4, 65.2, 82.5],
          ["Walnut Brownie", 72.4, 53.9, 39.1],
        ],
      },
      xAxis: { type: "category" },
      yAxis: info.yAxis || {},
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: info?.series || [
        { type: "bar", barWidth: 24 },
        { type: "bar", barWidth: 24 },
        { type: "bar", barWidth: 24 },
      ],
    };
    info.option = option;
    initChart(info);
  };

  // 横向多个柱状图
  const datesetMoreHChart = (info) => {
    const option = {
      legend: {
        show: false,
      },
      tooltip: {},
      dataset: {
        source: info.dataInfo.sourceData || [],
        // source: [
        //     ["product", "2015", "2016", "2017"],
        //     ["Matcha Latte", 43.3, 85.8, 93.7],
        //     ["Milk Tea", 83.1, 73.4, 55.1],
        //     ["Cheese Cocoa", 86.4, 65.2, 82.5],
        //     ["Walnut Brownie", 72.4, 53.9, 39.1],
        // ],
      },
      xAxis: {},
      yAxis: { type: "category" },
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
    };
    info.option = option;
    initChart(info);
  };

  // 中国地图
  const chinaMapChart = (info) => {
    const cJ = chinaJson;
    let d = info.dataInfo.seriesData || [];
    let seriesData = [];
    let maxArr = [];
    // console.log("d", d);
    cJ.features.forEach((v) => {
      let obj = d.find((b) => v.properties.id == b.name);
      // console.log("obj", v, obj);
      if (obj) {
        seriesData.push({
          name: v.properties.name,
          value: obj.value,
        });
        maxArr.push(obj.value);
      } else {
        seriesData.push({
          name: v.properties.name,
          value: 0,
        });
      }
    });
    // console.log("seriesData", seriesData);
    let maxNum = 1;
    d.forEach((data) => {
      maxNum = maxNum < data.value ? data.value : maxNum;
    });
    // maxNum += maxNum + Math.floor(maxNum / 1000);
    echarts.registerMap("china", cJ, {});
    const option = {
      title: {
        // text: "2022",
        // subtext: "Data",
        // sublink: "http://www.baidu.com",
        // left: "right",
      },
      tooltip: {
        trigger: "item",
        showDelay: 0,
        transitionDuration: 0.2,
      },
      visualMap: {
        // type: "continuous",
        show: true,
        left: "left",
        min: 0,
        max: maxNum,
        inRange: {
          // color: [
          //   "#e0f3f8",
          //   "#abd9e9",
          //   "#74add1",
          //   "#4575b4",
          //   "#313695",
          //   // "#ffffbf",
          //   // "#fee090",
          //   // "#fdae61",
          //   // "#f46d43",
          //   // "#d73027",
          //   // "#a50026",
          // ],
          color: [
            "#e6f7f3",
            '#b3dbcd',
            "#4fc9ae",
            "#03b38c",
            '#00875A'
            // "#74add1",
            // "#4575b4",
            // "#ffffbf",
            // "#fee090",
            // "#fdae61",
            // "#f46d43",
            // "#d73027",
            // "#a50026",
          ],
        },
        text: ["高", "低"],
        calculable: true,
      },
      toolbox: {
        show: false,
        //orient: 'vertical',
        left: "left",
        top: "top",
        feature: {
          dataView: { readOnly: false },
          restore: {},
          saveAsImage: {},
        },
      },
      series: [
        {
          name: "企业数量",
          type: "map",
          // roam: true,
          map: "china",
          emphasis: {
            label: {
              show: true,
            },
          },
          data: seriesData || [],
        },
      ],
    };
    info.option = option;
    initChart(info);
  };

  // 世界地图
  const worldMapChart = (info) => {
    // console.log("info", info);
    let newData = world,
      nameMap = {};
    newData.forEach((data) => {
      nameMap[data.name] = data.cnName;
    });
    let maxNum = 20;
    info.dataInfo.seriesData.forEach((data) => {
      maxNum = maxNum < data.value ? data.value : maxNum;
    });
    // maxNum += maxNum + Math.floor(maxNum / 1000);
    const wJ = worldJson;
    echarts.registerMap("world", wJ, {});
    const option = {
      // title: {
      //     text: "2022",
      //     subtext: "Data",
      //     sublink: "http://www.baidu.com",
      //     left: "right",
      // },
      tooltip: {
        trigger: "item",
        showDelay: 0,
        transitionDuration: 0.2,
      },
      visualMap: {
        show: true,
        left: "left",
        min: 10,
        max: maxNum,
        inRange: {
          color: [
            "#313695",
            "#4575b4",
            "#74add1",
            "#abd9e9",
            "#e0f3f8",
            "#ffffbf",
            "#fee090",
            "#fdae61",
            "#f46d43",
            "#d73027",
            "#a50026",
          ],
        },
        text: ["高", "低"],
        calculable: true,
      },
      // toolbox: {
      //     show: true,
      //     //orient: 'vertical',
      //     left: "left",
      //     top: "top",
      //     feature: {
      //         dataView: { readOnly: false },
      //         restore: {},
      //         saveAsImage: {},
      //     },
      // },
      series: [
        {
          name: "企业数量",
          type: "map",
          // roam: true,
          map: "world",
          emphasis: {
            label: {
              show: true,
            },
          },
          nameMap: nameMap,
          data: info.dataInfo.seriesData,
          // data: [{ name: "China", value: 2023 }],
        },
      ],
    };
    info.option = option;
    initChart(info);
  };

  return {
    lineChart,
    lineMoreChart,
    barChart,
    barEmptyChart,
    barLineChart,
    datesetChart,
    datesetHChart,
    datesetMoreChart,
    datesetMoreHChart,
    chinaMapChart,
    worldMapChart,
  };
};
export default comEChart;
